<template>
    <div class="goods-item">
        <RouterLink to="/">
            <el-image :src="goods.picture" lazy style="width: 160px;height: 160px">
                <div slot="placeholder"
                     style="width: 100%;height: 100%;background: #F5F7FA;text-align: center;align-items: center;line-height:160px;">
                    <i class="el-icon-picture-outline" style="font-size: 30px;"/>
                </div>
            </el-image>
        </RouterLink>
        <p class="name ellipsis">{{goods.name}}</p>
        <p class="desc ellipsis">{{goods.desc}}</p>
        <p class="price">&yen;{{goods.price}}</p>

    </div>
</template>

<script>
    export default {
        name: "GoodsItem",
        props: {
            goods: {
                type: Object,
                default: {}
            }
        }
    }
</script>

<style scoped lang="less">
    .goods-item {
        width: 220px;
        display: block;
        padding: 20px 30px;
        text-align: center;
        .hoverShadow();


        p {
            margin-top: 10px;
            font-size: 16px;
        }

        .desc {
            color: #999;
            height: 29px;
        }

        .price {
            font-size: 20px;
            color: @priceColor;
        }

    }
</style>